<template>
	<div class="zh-live-import">
		<nav-header>
			<template slot="menuBefore">
                <li><router-link to="/resources/live/livePlay-list">直播列表</router-link> </li>
				<li class="gap">&gt;</li>
			</template>
		</nav-header>
        
		<div class="zh-import-comter">
            <el-button plain @click="downloadDemo">下载模板</el-button>
            <uploader 
                :options="uploadOptions" 
                :autoStart="false" 
                ref="uploader" 
                :file-status-text="statusText" 
                @files-submitted="fileSubmit"
                @file-removed="fileRemoved" 
                @file-success="fileSuccess" 
                @file-error="fileFail"  
                class="uploader-example">
                <uploader-unsupport></uploader-unsupport>
                <uploader-btn :directory="false" :attrs="attrs" v-if="selectFileShow" :single="true">选择文件</uploader-btn>
                <uploader-list  v-if="!selectFileShow"></uploader-list>
            </uploader>
            <el-button type="primary" v-if="!selectFileShow" @click="fileUpload" style="margin-top: 10px;">确定导入</el-button>
		</div>
        
		<div class="zh-import-text">
			<p>注意事项:</p>
            <p>1、格式支持：excel 2003 版本及以上的 <span style="color:#FF0000">xls/xlsx</span> 格式</p>
            <p>2、Excel表数据从的第二行开始有效。<span style="color:#FF0000">表中数据均为必填项</span></p>
            <p>3、表格中的课程分类为非必填项</p>
            <p>4、从表格内第三行开始输入，示例不用删除</p>
		</div>
		<div class="zh-import-table">
			<p>例：</p>
			<div class="zh-table">
				<div class="zh-table-contents">
                    <el-table
                        :data="importData"
                        border
                        style="width: 100%">
						<el-table-column
							prop="name"
							label="直播名称"
							width="">
						</el-table-column>
						<el-table-column
							prop="type"
							label="课程分类"
							width="">
						</el-table-column>
						<el-table-column
							prop="speaker"
							label="主讲人名称"
							width="">
						</el-table-column>
						<el-table-column
							prop="accounts"
							label="主讲人帐号"
							width="">
						</el-table-column>
						<el-table-column
							prop="equipment"
							label="直播设备"
							width="">
						</el-table-column>
						<el-table-column
							prop="startTime"
							label="开始时间"
							width="">
						</el-table-column>
						<el-table-column
							prop="endTime"
							label="结束时间"
							width="">
						</el-table-column>
						<el-table-column
							prop="recording"
							label="是否录制"
							width="">
						</el-table-column>
					</el-table>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
    import {downloadBatchDemo, uploaderFileFail, longTimeMessage} from './../../../tools/tool';

	export default{
		data(){
			return {
				messageObj:{},
		    	statusText: {
			      	success: '上传成功',  
			      	error: '上传出错',  
			     	uploading: '正在上传...',  
			      	paused: '暂停',  
			      	waiting: '等待上传'  
				},
				selectFileOrNot:false,  //是否选中文件
			    uploadOrNot:false, 		//是否已经上传
			    uploadInfo:{
					file_name:'',
					file_path:'',
					file_size:0
				},
				attrs: {
			      	accept: ['application/vnd.ms-excel','application/vnd.openxmlformats-officedocument.spreadsheetml.sheet']
			    },
		    	uploadOptions: {
			          target: this.BASE_URL+'/api/user/vue_userdemo_upload',
			          testChunks: false,
			          headers:{Authorization : `Bearer `+this.$g.access_token},
			    },
		        fileList: [],
		        ruleForm: {
	                user_id:this.$g.user_id
	            },
	            rules: {
	              	
	      		},
	      		selectFileShow:true,//是否显示选择文件按钮
				uploadRetryTimes:100,//文件最大重传次数

				importData: [{
                    name: '1~20字符',
                    type: '学段/年级/学科',
                    speaker: 'name',
                    accounts: 'Zhangsan',
                    equipment: '设备902',
                    startTime: '2017-1-1 10:00:00',
                    endTime: '2017-1-1 12:00:00',
                    recording: '是',
                }],
                excelUploader: null, // 上传组件引用
			}
        },
        mounted () {  
            this.$nextTick(() => {  
                this.excelUploader = this.$refs.uploader.uploader  
            })  
		},
		methods: {
            /**
             * 下载导出模板
             */
	    	downloadDemo(){
                let url = this.BASE_URL+'/index/resource/live_import_demo';
                downloadBatchDemo(url);
	    	},
			submitForm(formName) {
				this.$refs[formName].validate((valid) => {
					if (valid) {
						if( this.selectFileOrNot ){
							this.fileUpload();
						}else{
							this.resourceSave();
						}
					} else {
						return false;
					}
				});
			},
	        resourceSave(){
				let resourceParam = {}
				if( this.uploadOrNot ) {
					resourceParam.path = this.uploadInfo.file_path;
				}
            	let success = ( data=>{
            		this.$message.success(data.msg);
                    
                    setTimeout(() => {
                        this.$router.push('/resources/live/livePlay-list');
                    }, 1000);
            	})
            	let fail = (res => {
                    longTimeMessage(this, res, 15000);
            	}) 
            	
				this.$ajax.post('api/live/vue_list_import',resourceParam,{func:{success:success,fail:fail}})	
            	
            	
            	
			},
			//上传成功的事件  
			fileSuccess (rootFile, file, message, chunk) { 
				this.selectFileShow = true;
                var mess = eval('(' + message + ')');
                mess = handleResponseData( mess );
                
			 	if(parseInt( mess.data.status ) ===1 ){
			  		this.uploadOrNot = true;
			  		this.uploadInfo.file_name = mess.data.file_name;
			  		this.uploadInfo.file_path = mess.data.file_path;
			  		this.uploadInfo.post_fix = mess.data.post_fix;
			  	
			  		this.resourceSave();
			  }
			  this.excelUploader.cancel();
			},
			fileFail(rootFile, file, message, chunk) {
                uploaderFileFail(this, this.excelUploader, file, message);
			},
			//过滤文件格式
			fileSubmit(files, fileList, event){
				for (var i = 0 ; i < fileList.length ; i++ ) {
                    if( this.excelUploader.fileList.length  > 1  ){
                        //删除第一张图片
                        this.excelUploader.removeFile( this.excelUploader.fileList[0] );
                    }
                    this.uploadInfo.file_size =  fileList[i].size;
                    this.selectFileOrNot = true;
                    this.selectFileShow = false;
				}
			},
			fileRemoved(file){

				this.selectFileOrNot = false;
				this.selectFileShow = true;
			},
			fileUpload(){

				this.excelUploader.upload();
			},
	    },
		destroyed  (to, from, next) {
			this.$message.closeAll();
		},
	}
</script>
<style lang="scss">
	.zh-live-import {
		.zh-import-comter {
			margin-top: 20px;
		}
		.uploader-example {
			margin-top: 20px;
		}
		.zh-import-text {
			font-size: 12px;
		    color: #999;
		    line-height: 30px;
		    margin: 20px;
		    p {
		    	margin: 0;
		    }
		    span {
			    color: red;
			}
		}
		.zh-import-table {
			p {
				font-size: 16px;
				margin-bottom: 20px;
			}
		}
		.uploader-list {
		    .uploader-file-pause {
		      display: none !important;
		    }
		    .uploader-file-status {
		      text-indent: 0;
		    }
 		}

        .el-table__header-wrapper table thead {
            tr:first-child {
                th:not(:nth-child(2)) {
                    color: #FF0000;
                }
            }
        }
	}
</style>